<template>
  <!-- <div id="app">
    <h2>ssssssssss</h2>
    <el-button icon="el-icon-search" circle></el-button>
    <router-view />
  </div> -->
  <div id="app" v-cloak>
    <div class="tag-box">
      <topTagList></topTagList>
    </div>
    <div class="right-con">
      <rightCon></rightCon>
    </div>
  </div>
</template>

<script>
import topTagList from '@common/topTagList'
import rightCon from '@common/rightCon'
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

export default {
  name: 'App',
  components: {
    rightCon,
    topTagList
  },
  data() {
    return {}
  },
  mounted() {
    console.log(
      window.__POWERED_BY_QIANKUN__,
      qiankunWindow.__POWERED_BY_QIANKUN__
    )
    // this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      let url = '/users/curr-user'
      this.pubRequire('get', url, '', (response) => {
        let data = response
        if (data) {
          this.loading = false
          // 有人员信息，登录成功
          this.$store.commit('setUserInfo', data)
          localStorage.setItem('userInfo', JSON.stringify(data))
          //读取字典信息
          //this.getDictionaries()
          sessionStorage.removeItem('authenPageName')
        }
      })
    }
  }
}
</script>

<style lang="less">
@headH: 44px;
@text-blue: #0d1636;
[v-cloak] {
  display: none;
}
html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
}

#app {
  height: 100%;
  font-size: 12px;
  /*background: #eff2f8;
  overflow: auto;*/
  /* custom */
  ul,
  li {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  li.number {
    margin-right: 5px;
    font-weight: normal;
  }
  .el-pager {
    li.el-icon-more {
      margin-right: 5px;
      font-weight: normal;
    }
  }
  .main-con {
    margin-left: 220px;
    height: calc(~'100% - 55px');
    padding-top: 44px;

    .tag-box {
      position: fixed;
      width: calc(~'100% - 227px');
      padding: 8px 0 7px;
      background: #eff2f8;
      z-index: 1600;
    }
    .rightScroll {
      height: calc(~'100% - 46px');
      padding: 30px 0 12px;
    }
    .el-scrollbar__view {
      position: relative;
    }
    .el-scrollbar__bar {
      z-index: 5;
    }
  }

  .right-con {
    width: calc(~'100% - 20px');
    // height: calc(~'100% - 20px');
    height: calc(100vh - 108px);
    margin: 10px;
    margin-bottom: 0;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 4px 0px rgba(207, 217, 238, 1);
    border-radius: 5px;
    position: relative;
    overflow-y: auto;
    // z-index: 1600;

    .con-right-title {
      font-size: 24px;
      font-weight: 500;
      line-height: 24px;
      color: @text-blue;
      padding: 20px 0 10px 30px;

      & + .el-table {
        margin-top: 15px;
      }
    }
    .el-table {
      td {
        padding: 10px 0 !important;
      }
    }
    .box-card {
      margin: 10px;
    }
  }

  .el-scrollbar__wrap {
    /* overflow-y: auto;*/
    overflow: scroll !important;
    margin-right: -15px !important;
  }

  .el-header,
  .el-main {
    padding: 0;
  }

  .slid-con {
    height: calc(~'100% - ' @headH);
    position: absolute;
    top: @headH;
    bottom: 0;
    overflow: hidden;
    // transition: width 0.28s;

    .el-menu {
      width: 100% !important;
    }

    border: 0;

    &.el-menu--collapse {
      width: 50px;
    }

    i.iconfont {
      font-size: 16px;
      margin-right: 17px;
      color: #9bb1c3;
    }

    .el-submenu__title {
      color: rgba(13, 22, 54, 1);
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFangSC;
      // font-weight: 600;
      height: 40px;
      // white-space: initial;
      line-height: 1px;
      padding: 15px 0;
      span {
        display: inline-block;
        width: 120px;
        margin-left: -16px;
        // font-weight: 600;
      }
    }

    .el-menu-item {
      color: rgba(13, 22, 54, 1);
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFangSC;
      font-weight: 600;
      height: auto;
      line-height: 14px;
      white-space: inherit;
      padding: 14px 0;
      span {
        display: inline-block;
        width: 120px;
        // font-weight: 600;
      }
      a {
        display: block;
        color: black;
        text-decoration: none;
      }

      &.is-active {
        i.iconfont {
          color: #dfedf6;
        }

        a {
          color: #dfedf6;
        }
      }
    }
    .el-scrollbar__bar.is-horizontal {
      display: none;
    }
  }
  .search-box {
    // 列表上方的表单，提示语位置
    .el-form-item__error {
      top: 83%;
    }
  }
}
</style>
